<template>
  <div class="emotion-search content-view">
    <div class="emotion-header">
      <div class="header-title">
        <img src="../../../assets/images/emotionSearch/title.png" alt />
      </div>
      <div class="header-sel">
        <a-select
          style="width: 116px"
          label-in-value
          @change="(value) =>handleChange('range', value)"
          v-model="selectChannel"
          dropdownClassName="sel-dropdown"
        >
          <a-icon slot="suffixIcon" type="caret-down" />
          <a-select-option v-for="item in selectChannelList" :key="item.key" :value="item.key">
            <span style="textAlign: center">{{item.label}}</span>
          </a-select-option>
        </a-select>
        <a-select
          style="width: 92px; marginLeft: 12px"
          label-in-value
          @change="(value) =>handleChange('area', value)"
          v-model="selectArea"
          dropdownClassName="search-select-dropdown"
        >
          <a-icon slot="suffixIcon" type="caret-down" style="marginLeft: 8px" />
          <a-select-option v-for="item in selectAreaList" :key="item.key" :value="item.key">
            <span style="textAlign: center">{{item.label}}</span>
          </a-select-option>
        </a-select>
      </div>
      <div class="global-search-wrapper">
        <a-input-search
          v-model="keyword"
          class="higher-search"
          placeholder="请输入关键词"
          size="large"
          @search="onSearch"
        >
          <!-- @change="(e)=>inputSearch(e.target.value)" -->
          <a-button
            slot="enterButton"
            style="margin-right: -12px"
            class="search-btn"
            size="large"
            type="primary"
          >搜索</a-button>
        </a-input-search>
      </div>
    </div>
    <div class="emotion-content">
      <!-- 无搜索无数据情况 -->
      <div class="no-result-content" v-if="isShowTip">
        <img src="../../../assets/images/hotspotSearch/hotspot-nodata.png" alt />
        <p style="textAlign: center; fontSize: 16px; color:#AAAAAA">搜索你想要的内容</p>
      </div>
      <!-- 点击搜索后数据显示情况 -->
      <div class="result-content" v-else>
        <!-- 四个卡片 -->
        <div class="div-cards">
          <div
            class="card-item"
            :class="{'active':activeIndex === index}"
            v-for="(item,index) in cardList"
            :key="index"
            @click="handleChange('card', index)"
          >
            <div class="div-arrow" v-show="activeIndex === index" />
            <div class="card-inner" :key="item.id">
              <div class="card-tip">
                <img :src="getSrc(item.id)" alt />
                <span>{{item.name}}</span>
              </div>
              <span>{{item.value}}</span>
            </div>
          </div>
        </div>
        <!-- 三个情绪详情--图表 -->
        <div v-if="echartsVisible">
          <a-spin :spinning="spinning">
            <div class="div-echarts">
              <a-row :gutter="24" style="marginLeft: 0px; marginRight: 0px;">
                <a-col :span="12" style="paddingLeft:0px; paddingRight: 8px">
                  <a-card :bordered="false" style="width: 100%; height:260px;" class="card-shadow">
                    <sectionTitle titleName="渠道分布趋势" des style="paddingBottom: 8px">
                      <slot>
                        <img src="../../../assets/images/emotionSearch/text-ico.png" alt />
                      </slot>
                    </sectionTitle>
                    <channelEcharts
                      id="trendendcyChart"
                      height="190px"
                      :smooth="true"
                      :data="channelTrendData"
                    ></channelEcharts>
                  </a-card>
                </a-col>
                <a-col :span="12" style="paddingLeft:8px; paddingRight: 0px">
                  <a-card :bordered="false" style="width: 100%; height:260px;" class="card-shadow">
                    <sectionTitle titleName="站点情绪概况" des style="paddingBottom: 8px">
                      <slot>
                        <img src="../../../assets/images/emotionSearch/windmill-ico.png" alt />
                      </slot>
                    </sectionTitle>
                    <funnelEcharts id="funnelEcharts" :data="siteMoodData"></funnelEcharts>
                  </a-card>
                </a-col>
              </a-row>
            </div>
            <!-- 情绪详情--精选评论分布 -->
            <div class="div-comments">
              <sectionTitle titleName="精选评论分布" des style="paddingBottom: 16px">
                <slot>
                  <img src="../../../assets/images/emotionSearch/windmill-ico.png" alt />
                </slot>
              </sectionTitle>
              <circuitEcharts
                id="commentsEcharts"
                height="300px"
                :data="commentsData"
                :color="echartsColor"
              />
              <div class="tips">网友观点主要表现如下几个方面：</div>
              <a-spin :spinning="spinning">
                <div class="comments-list" v-for="(item, index) in commentsData" :key="item.id">
                  <sectionComment
                    class="child"
                    :titleName="item.name"
                    :des="'(' + item.percent +')'"
                    :color="echartsColor[index]"
                    :comment="item.comment"
                  />
                </div>
              </a-spin>
            </div>
          </a-spin>
        </div>
        <!-- 情感总量详情 -->
        <div class="section emotional-analysis" v-else style="boxShadow 0px 0px 10px 0px rgba(223, 224, 231, 0.76)">
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>网络情绪趋势</span>
            </h3>
            <div class="emotional-content">
              <emotionEcharts id="emotionCount" height="280px" :data="internetMoodData"></emotionEcharts>
            </div>
          </a-card>
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>精选评论</span>
              <i>(18条结果)</i>
            </h3>
            <div class="emotional-table card-table">
              <a-table
                :columns="emotionalColumns"
                :data-source="emotionalData"
                :pagination="false"
                :loading="loading"
              >
                <template slot-scope="text,record" slot="evaluation">
                  <div
                    class="td-detail"
                    v-if="record.isShowMore === false"
                  >{{ record.evaluation|ellipsis}}</div>
                  <div class="td-detail" v-else>{{ record.evaluation}}</div>
                  <div class="more-btrn" v-if="record.evaluation.length > 34">
                    <div v-if="record.isShowMore === false" @click="detailMoreBtn(record)">
                      <span>查看更多</span>
                      <a-icon type="down" />
                    </div>
                    <div v-else @click="detailMoreBtn(record)">
                      <span>收起</span>
                      <a-icon type="up" />
                    </div>
                  </div>
                </template>
              </a-table>
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sectionTitle from "components/base/sectionTitle";
import detailTitle from "components/base/detailTitle";
import sectionComment from "components/base/sectionComment";
import emotionEcharts from "components/configuration/newsDetail/emotionEcharts";
import channelEcharts from "components/configuration/emotionSearch/channelEcharts";
import circuitEcharts from "components/configuration/emotionSearch/circuitEcharts";
import funnelEcharts from "components/configuration/emotionSearch/funnelEcharts";
export default {
  components: {
    sectionTitle,
    detailTitle,
    emotionEcharts,
    channelEcharts,
    circuitEcharts,
    sectionComment,
    funnelEcharts,
  },
  data() {
    return {
      loading: false,
      spinning: false,
      isShowTip: true,
      echartsVisible: false,
      selectChannel: { key: 0 },
      selectArea: { key: 0 },
      selectChannelList: [
        { key: 0, label: "全部渠道" },
        { key: 1, label: "官方门户" },
        { key: 2, label: "官方媒体" },
        { key: 3, label: "主流媒体" },
        { key: 4, label: "自媒体" },
      ],
      selectAreaList: [
        { key: 0, label: "全国" },
        { key: 1, label: "安徽省" },
        { key: 2, label: "辽宁省" },
        { key: 3, label: "江苏省" },
      ],
      keyword: "",
      cardList: [
        { id: 1, name: "情感总量", value: 80000 },
        { id: 2, name: "正面情绪", value: 40000 },
        { id: 3, name: "中立情绪", value: 20000 },
        { id: 4, name: "负面情绪", value: 20000 },
      ],
      activeIndex: 0,
      emotionalData: [],
      emotionalColumns: [
        {
          title: "评价",
          dataIndex: "evaluation",
          key: "evaluation",
          align: "center",
          width: "60%",
          scopedSlots: { customRender: "evaluation" },
        },
        {
          title: "评价时间",
          dataIndex: "time",
          key: "time",
          align: "center",
        },
        {
          title: "来源",
          dataIndex: "source",
          key: "source",
          align: "center",
        },
        {
          title: "情绪",
          dataIndex: "emotional",
          key: "emotional",
          align: "center",
        },
      ],
      echartsColor: [
        "#F24D4B",
        "#FF7D3D",
        "#FFAD3D",
        "#66BB6A",
        "#5BDA79",
        "#25F1D8",
        "#1FAFF5",
        "#4B6EF2",
        "#9481F5",
        "#FF5AA4",
      ],
      //网络情绪趋势数据
      internetMoodData: [],
      //渠道分布趋势数据
      channelTrendData: [],
      //站点情绪概况数据
      siteMoodData: [],
      //精选评论分布数据
      commentsData: [],
      color: "",
      timer: null,
    };
  },
  mounted() {
    this.getEmotionalCountData();
  },
  methods: {
    getEmotionalCountData() {
      this.loading = true;
      this.internetMoodData = [
        { id: 1, name: "正向", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { id: 1, name: "中立", data: [123, 345, 678, 111, 2367, 1234, 890] },
        { id: 1, name: "负向", data: [11, 234, 123, 765, 111, 345, 104] },
      ];
      this.getTableData();
    },
    getTableData() {
      //请求获取精选评论列表数据
      this.emotionalData = [
        {
          key: "1",
          evaluation:
            "黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜",
          time: "2020-08-21",
          source: "新华网",
          emotional: "正向",
          isShowMore: false,
        },
        {
          key: "2",
          evaluation:
            "黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜",
          time: "2020-08-21",
          source: "新华网",
          emotional: "负向",
          isShowMore: false,
        },
      ];
      this.timer = setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    getChannelTrendData() {
      this.channelTrendData = [
        {
          name: "新闻",
          data: [
            { date: "2020-07-27", value: 820 },
            { date: "2020-07-28", value: 932 },
            { date: "2020-07-29", value: 901 },
            { date: "2020-07-30", value: 934 },
            { date: "2020-07-31", value: 1290 },
            { date: "2020-08-01", value: 1330 },
            { date: "2020-08-02", value: 1320 },
          ],
        },
        {
          name: "微博",
          data: [
            { date: "2020-07-27", value: 820 },
            { date: "2020-07-28", value: 932 },
            { date: "2020-07-29", value: 901 },
            { date: "2020-07-30", value: 934 },
            { date: "2020-07-31", value: 1290 },
            { date: "2020-08-01", value: 1330 },
            { date: "2020-08-02", value: 1320 },
          ],
        },
        {
          name: "微信",
          data: [
            { date: "2020-07-27", value: 820 },
            { date: "2020-07-28", value: 932 },
            { date: "2020-07-29", value: 901 },
            { date: "2020-07-30", value: 934 },
            { date: "2020-07-31", value: 1290 },
            { date: "2020-08-01", value: 1330 },
            { date: "2020-08-02", value: 1320 },
          ],
        },
      ];
    },
    getSiteMoodData() {
      this.siteMoodData = [
        { id: 1, value: 399, name: "北京联盟" },
        { id: 3, value: 328, name: "北京联盟2" },
        { id: 5, value: 286, name: "搜狐新闻" },
        { id: 7, value: 224, name: "妆点网" },
        { id: 9, value: 198, name: "经理人网" },
        { id: 2, value: 369, name: "搜狐政务" },
        { id: 4, value: 301, name: "无锡市思乡客食品" },
        { id: 6, value: 264, name: "中国小康网" },
        { id: 8, value: 168, name: "搜狐政务2" },
        { id: 10, value: 78, name: "搜狐新闻2" },
      ];
    },
    getCommentsData() {
      this.commentsData = [
        {
          id: 1,
          value: 2,
          name: "所以行骗手段才会这么毁三观1",
          percent: "4.25%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 2,
          value: 8,
          name: "医疗这种涉及公共利益的体系还各种神操作1...",
          percent: "17.02%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 3,
          value: 5,
          name: "医疗这种涉及公共利益的体系还各种神操作2...",
          percent: "10.64%",
          comment:
            "弱智太多，多以行骗的手段才会这么毁三观, 弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 4,
          value: 4,
          name: "所以行骗手段才会这么毁三观2",
          percent: "8.51%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 5,
          value: 6,
          name: "所以行骗手段才会这么毁三观3",
          percent: "12.77%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 6,
          value: 6,
          name: "医疗这种涉及公共利益的体系还各种神操作3...",
          percent: "12.77%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 7,
          value: 5,
          name: "医疗这种涉及公共利益的体系还各种神操作4...",
          percent: "10.64%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 8,
          value: 2,
          name: "所以行骗手段才会这么毁三观4",
          percent: "4.25%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 9,
          value: 3,
          name: "所以行骗手段才会这么毁三观5",
          percent: "6.38%",
          comment: "弱智太多，多以行骗的手段才会这么毁三观",
        },
        {
          id: 10,
          value: 6,
          name: "医疗这种涉及公共利益的体系还各种神操作5...",
          percent: "12.77%",
          comment:
            "弱智太多，多以行骗的手段才会这么毁三观, 弱智太多，多以行骗的手段才会这么毁三观",
        },
      ];
      this.timer = setTimeout(() => {
        this.spinning = false;
      }, 500);
    },
    handleChange(type, value) {
      console.log("选择:", type);
      console.log("value:", value);
      if (type == "card") {
        this.activeIndex = value;
        if (value == 0) {
          this.echartsVisible = false;
          //更新情感总量数据
          this.getEmotionalCountData();
        } else {
          this.spinning = true;
          this.echartsVisible = true;
          this.getChannelTrendData();
          this.getSiteMoodData();
          this.getCommentsData();
        }
      }
    },
    // inputSearch(value) {
    //   console.log("搜索内容为：", value);
    //   if (value == "" || value == null) {
    //     this.$message.warning("请选择筛选条件或选择普通搜索模式进行搜索");
    //     // this.show = true;
    //   } else {
    //     // this.show = false;
    //   }
    // },
    onSearch() {
      console.log("点击了搜索按钮:", this.keyword);
      if (this.keyword == "") {
        // this.$message.warning("请输入要搜索的内容");
        this.isShowTip = true;
        return;
      } else {
        this.isShowTip = false;
      }
      this.getEmotionalCountData();
    },
    detailMoreBtn(record, type) {
      record.isShowMore = !record.isShowMore;
    },
    getSrc(id) {
      let data = "emoji-ico-" + id;
      return require("../../../assets/images/emotionSearch/" + data + ".png");
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>
<style>
.global-search-wrapper {
  width: 470px;
}

.global-search {
  width: 100%;
}

.global-search.ant-select-auto-complete .ant-select-selection--single {
  margin-right: -110px;
  height: 56px;
}

.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input:not(:last-child) {
  height: 56px;
  font-size: 18px;
  margin: 0 0 !important;
  border: 0px;
}

.global-search.ant-select-auto-complete
  .ant-input-affix-wrapper
  .ant-input-suffix
  button {
  width: 110px;
  height: 56px;
  font-size: 20px;
  background: #289cfd;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.global-search-dropdown .ant-select-dropdown-menu {
  min-height: 130px;
  border: 0px;
  font-size: 20px;
}
</style>
<style lang="stylus" scoped>
.emotion-search
  width 100%
  .emotion-header
    margin-top 38px
    margin-left 130px
    margin-right 246px
    display flex
    align-items center
    .header-title
      height 34px
    .header-sel
      margin-left 30px
      text-align center
.emotion-content
  min-height 784px
  padding 20px
  position relative
  .no-result-content
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
  .result-content
    width 100%
    height auto
    .div-cards
      width 100%
      height auto
      padding 26px 52px
      display flex
      align-items center
      justify-content space-between
      position relative
      .card-item
        width 218px
        height 144px
        background #fff
        border-radius 5px
        box-sizing border-box
        cursor pointer
        padding-bottom 10px
        box-shadow 0px 5px 24px rgba(138, 178, 232, 0.36)
        position relative
        .div-arrow
          left 50%
          transform translateX(-50%) rotate(45deg)
          top 136px
          border-color transparent #fff #fff transparent
          position absolute
          display block
          width 8px
          height 8px
          background transparent
          border-style solid
          border-width 7.6px
        .card-inner
          background-clip padding-box
          border-radius 4px
          padding 14px 36px
          span
            font-size 48px
            text-align center
            font-weight 500
            color #333333
          .card-tip
            height 43px
            line-height 43px
            span
              margin-left 12px
              font-size 16px
              text-align center
              color #333333
    .card-item.active
      background linear-gradient(180deg, #398afe, #3cbbf6)
      box-shadow 0px 6px 18px rgba(70, 186, 246, 0.38)
      .card-inner
        span
          color #fff
        .card-tip
          span
            color #fff
      .div-arrow
        border-color transparent #3cbbf6 #3CB7F7 transparent
    .div-comments
      width 100%
      height auto
      background-color #ffffff
      margin-top 18px
      border-radius 5px
      padding 0px 14px 14px 14px
      box-shadow 0px 0px 10px 0px rgba(223, 224, 231, 0.76)
      .tips
        height 30px
        line-height 30px
        margin 14px 32px
        background #F1F2F6
        padding-left 16px
        font-size 14px
        color #717798
      .comments-list
        background #fff
        border-bottom 1px solid #ECECEC
        margin 0px 46px
      .comments-list:last-child
        border-bottom 0
    .card-table
      .ellipsis
        width 100%
        text-overflow -o-ellipsis-lastline
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 2
        line-clamp 2
        -webkit-box-orient vertical
      .td-detail
        text-align left
        font-size 16px
      .more-btrn
        text-align center
        color #1678fd
        font-size 16px
        margin-top 10px
        cursor pointer
.card-shadow
  box-shadow 0px 0px 10px 0px rgba(223, 224, 231, 0.76)
.section
  .card-title
    font-size 16px
    color #333
    i
      color #ff7e00
      margin-left 10px
    span
      position relative
      padding 0 5px
    span:after
      content ''
      width 100%
      height 4px
      display inline-block
      position absolute
      background rgba(253, 214, 152, 0.7)
      bottom 0px
      left 0px
</style>